let click=0;
let But1 =  document.querySelector('#but1');
let But2 =  document.querySelector('#but2');
let But3 =  document.querySelector('#but3');
let But4 =  document.querySelector("#but4");
let But5 =  document.querySelector("#but5");
let But6 =  document.querySelector("#but6");
let But7 =  document.querySelector("#but7");
let But8 =  document.querySelector("#but8");

let brightness=0;
let pattern=0;
let pace=0;




//滑块调节
let LED_Brightness = "/LED-Brightness"; //地址拼接
let LED_Pace = "/LED-Pace"; //地址拼接
let LED_Pattern = "/LED-Pattern"; //地址拼接



let Brightness = document.querySelector("#brightness");
let Pace = document.querySelector("#pace");
let Span = document.querySelector("#span");
let Span1 = document.querySelector("#span1");
let Main = document.querySelector('#main');
let Else = document.querySelector('#else');
let Line = document.querySelector('#select-line');


Main.addEventListener("click", () =>{
  Line.style.left="29%";
});
Else.addEventListener("click", () =>{
  Line.style.left="58%";
});



Brightness.addEventListener("input", () => {
    brightness = Brightness.value;
    value = Math.floor(brightness / 2.55);
    Span.innerHTML = value;
    //show in console
    console.log("--brightness:  " + brightness + "--");
    //send data
    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Brightness + "?brightness=" + brightness, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
  });


Pace.addEventListener("input", () => {
    pace = Pace.value;
    value = Math.floor(pace / 2.55);
    Span1.innerHTML = value;
    //show in console
    console.log("--pace:  " + pace + "--");
    //send data
    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pace + "?pace=" + pace, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
  });


  But1.addEventListener("click",() =>{
    init_button_position();
    //But1.style.left="45%";
    But1.style.width="62%";
    But2.style.width="10%";
    But3.style.width="13%";
    But3.style.left="85%";
    But2.style.left="72%";
    But1.style.left="12%";
    Line.style.left="58%";
    pattern=1;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
    
})



But2.addEventListener("click",() =>{
    init_button_position();
    But2.style.width="60%";
    But3.style.width="10%";
    But1.style.width="13%";

    But2.style.left="28%";
    But1.style.left="9%";
    But3.style.left="85%";
    pattern=2;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})

But3.addEventListener("click",() =>{
    init_button_position();
    But3.style.width="60%";
    But2.style.width="12%";
    But1.style.width="13%";

    But3.style.left="43%";
    But2.style.left="25%";
    But1.style.left="9%";
    But1.style.animationPlayState = ''  // animationPlayState 为空时继续播放
    console.log("run");
    console.log(document.querySelector('.but1'));

    pattern=3;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})

But4.addEventListener("click",() =>{
    init_button_position();
    But4.style.width="60%";
    But5.style.width="12%";
    But6.style.width="13%";

    But4.style.left="12%";
    But5.style.left="69%";
    But6.style.left="82%";

    pattern=4;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})


But5.addEventListener("click",() =>{
    init_button_position();

    But4.style.width="12%";
    But5.style.width="60%";
    But6.style.width="10%";

    But4.style.left="12%";
    But5.style.left="31%";
    But6.style.left="89%";

    pattern=5;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})

But6.addEventListener("click",() =>{
    init_button_position();

    But4.style.width="12%";
    But5.style.width="12%";
    But6.style.width="60%";

    But4.style.left="10%";
    But5.style.left="24%";
    But6.style.left="43%";

    pattern=6;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };


    
})



But7.addEventListener("click",() =>{
    init_button_position();

    But7.style.width="70%";
    But8.style.width="14%";


    But7.style.left="12%";
    But8.style.left="80%";

    pattern=7;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})
But8.addEventListener("click",() =>{
    init_button_position();

    But7.style.width="14%";
    But8.style.width="70%";


    But7.style.left="12%";
    But8.style.left="33%";

    pattern=8;

    let sendRequest = new XMLHttpRequest();
    sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
    sendRequest.send(null);
    sendRequest.onreadystatechange = function () {
      if (sendRequest.readyState === 4 && sendRequest.status === 200) {
        console.log(sendRequest.responseText);
      }
    };
})




init_button_position = function(){
    
    But1.style.left="12%";
    But2.style.left="45%";
    But3.style.left="69%";
    But4.style.left="13%";
    But5.style.left="33%";
    But6.style.left="68%";
    But7.style.left="11%";
    But8.style.left="40%";

    
    But1.style.width="32%";
    But2.style.width="20%";
    But3.style.width="20%";
    But4.style.width="15%";
    But5.style.width="35%";
    But6.style.width="23%";
    But7.style.width="24%";
    But8.style.width="50%";
}






